<template>
  <div class="get-detail">
    <div class="vendor-info">
      <div class="vendor-info-title">
        <h4>商家信息</h4>
        <el-button type="primary" size="small" @click="updateVendorInfo">变更</el-button>
      </div>
      <el-table
        :data="vendorInfo"
        style="width: 100%">
        <el-table-column
          prop="vendorName"
          label="公司名称"
        >
        </el-table-column>
        <el-table-column
          prop="legal_person"
          label="法人"
        >
        </el-table-column>
        <el-table-column
          prop="registered_capital"
          label="注册资本">
        </el-table-column>
        <el-table-column
          prop="registered_address"
          label="注册地址">
        </el-table-column>
        <el-table-column
          prop="registered_address"
          label="税务登记号">
        </el-table-column>
        <el-table-column
          prop="website"
          label="商家官网">
        </el-table-column>
        <el-table-column
          prop="address"
          label="通讯地址">
        </el-table-column>
      </el-table>
    </div>
    <div class="vendor-connecter">
      <div class="vendor-info-title">
        <h4>商家联系人</h4>
      </div>
      <el-table
        :data="vendorConnecter"
        style="width: 100%">
        <el-table-column
          prop="contact_name"
          label="联系人姓名"
        >
        </el-table-column>
        <el-table-column
          prop="position"
          label="职位"
        >
        </el-table-column>
        <el-table-column
          prop="contact"
          label="联系人手机">
        </el-table-column>
        <el-table-column
          prop="email"
          label="邮箱">
        </el-table-column>
        <el-table-column
          prop="fax"
          label="传真">
        </el-table-column>
        <el-table-column
          prop="addTime"
          label="添加时间">
        </el-table-column>
        <!--<el-table-column-->
          <!--prop="address"-->
          <!--label="操作">-->
          <!--<template scope="scope">-->
            <!--<el-button type="text" size="small" @click="editConnectInfo">编辑</el-button>-->
          <!--</template>-->
        <!--</el-table-column>-->
      </el-table>
    </div>
    <div class="vendor-manage">
      <div class="vendor-info-title">
        <h4>店铺管理</h4>
      </div>
      <el-table
        :data="vendorShopManage"
        style="width: 100%">
        <el-table-column
          prop="storeName"
          label="店铺名称"
        >
        </el-table-column>
        <el-table-column
          prop="storeType"
          label="店铺类型"
        >
        </el-table-column>
        <el-table-column
          prop="storeBusinessType"
          label="销售渠道">
        </el-table-column>
        <el-table-column
          prop="storeInfo"
          label="品牌">
        </el-table-column>
        <el-table-column
          prop="storeTelephone"
          label="店铺电话">
        </el-table-column>
        <el-table-column
          prop="storeName"
          label="商家名称">
        </el-table-column>
        <el-table-column
          prop="address"
          label="品类">
        </el-table-column>
        <el-table-column
          prop="isSelfPickup"
          label="是否自营">
        </el-table-column>
      </el-table>
    </div>
    <div class="vendor-contract">
      <div class="vendor-info-title">
        <h4>合同信息</h4>
      </div>
      <el-table
        :data="vendorContractInfo"
        style="width: 100%">
        <el-table-column
          prop="storeName"
          label="店铺"
        >
        </el-table-column>
        <el-table-column
          prop="vendorContractNum"
          label="合同编号"
        >
        </el-table-column>
        <el-table-column
          prop="signDate"
          label="签约日期">
        </el-table-column>
        <el-table-column
          prop="deadline"
          label="合同期限">
        </el-table-column>
        <el-table-column
          prop="manageCastType"
          label="管理费类型">
        </el-table-column>
        <el-table-column
          prop="manageCast"
          label="管理费">
        </el-table-column>
        <el-table-column
          prop="rebateType"
          label="返利方式">
        </el-table-column>
        <el-table-column
          prop="rebatePortion"
          label="返佣份额">
        </el-table-column>
        <el-table-column
          prop="cashDeposit"
          label="保证金额">
        </el-table-column>
        <el-table-column
          prop="creater"
          label="创建人">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  // import Vue from 'vue'
  import Hub from '@/assets/utils/Hub'
  import axios from 'axios'
  export default{
    data () {
      return {
        thisVendorId: -1,
        vendorInfoData: null,
        vendorInfo: [{
          vendorName: '无',
          legal_person: '无',
          registered_capital: '无',
          registered_address: '无',
          website: '无',
          address: '无',
          taxation_affairs_registration: '无'
        }],
        vendorConnecter: [{
          contact_name: '无',
          position: '无',
          contact: '无',
          email: '无',
          fax: '无',
          addTime: '无'
        }],
        vendorShopManage: [],
        vendorContractInfo: []
      }
    },
    methods: {
      updateVendorInfo () {
        this.thisVendorId = this.$route.params.id
        this.$router.push('/update-vendor/' + this.thisVendorId)
      },
      editConnectInfo () {
        let vendorId = this.$route.params.id
        this.$router.push('/edit-connect-person/' + vendorId)
      }
    },
    mounted () {
      let _this = this
      axios.post('/api/vendor/getDetail', {
        vendorId: this.$route.params.id
      }).then((res) => {
        _this.fullScreenLoading = false
        let data = res.data.data
        switch (res.data.code) {
          case 9999:
            Hub.$emit('breadVendorName', data.vendorName)
            _this.vendorInfoData = data
            _this.thisVendorId = -1
            _this.vendorInfo[0].vendorName = data.vendorName
            _this.vendorInfo[0].legal_person = data.legalPerson
            _this.vendorInfo[0].registered_capital = data.registeredCapital
            _this.vendorInfo[0].registered_address = data.registeredAddress
            _this.vendorInfo[0].address = data.address
            _this.vendorInfo[0].taxation_affairs_registration = data.taxationAffairsRegistration
            _this.vendorConnecter[0].contact_name = data.contactName
            _this.vendorConnecter[0].contact = data.phone
            _this.vendorConnecter[0].email = data.email
            _this.vendorShopManage = data.shopList
            console.log(_this.vendorInfo)
            break
          case 6000:
            (() => {
              console.log('csErr')
            })()
        }
      })
    }
  }
</script>

<style lang="less" rel="stylesheet/less" scoped>
  .get-detail {
    & > div[class*=vendor-] {
      margin: 10px 0;
    }
    padding: 20px;
    .vendor-info-title {
      padding: 3px 0;
      display: flex;
      justify-content: space-between;
    }
  }
</style>
